<template>
   <div class="app-container">
       <el-card class="box-card">
      <div slot="header" class="clearfix">
        <el-row>
          <el-form :inline="true" :model="listQuery" ref="listQuery" class="demo-form-inline">
            <el-form-item label="">
              <el-input type="text" v-model="listQuery.user_code" placeholder="请输入用户ID"></el-input>
            </el-form-item>
            <el-form-item label="">
              <el-input type="text" v-model="listQuery.nickname" placeholder="请输入昵称"></el-input>
            </el-form-item>
            <el-form-item label="">
              <el-select filterable v-model="listQuery.type_id" placeholder="徽章类别">
                  <el-option
                  v-for="item in badgeType"
                  :key="item.value"
                  :label="item.label"
                  :value="item.value">
                  </el-option>
              </el-select>
            </el-form-item>
            <el-form-item label="">
              <el-input type="text" v-model="listQuery.badge_name" placeholder="请输入徽章名称"></el-input>
            </el-form-item>
            <el-form-item>
              <el-button type="primary" @click="searchSubmit">查询</el-button>
              <el-button type="primary" @click="resetSubmit">重置</el-button>
            </el-form-item>
          </el-form>
        </el-row>
      </div>
      <div class="item" v-loading="listLoading">
          <el-table ref="dataList" :data="menuList" @selection-change="handleSelectionChange" style="width:100%;margin-bottom: 20px;" row-key="id" border :tree-props="{children: 'children', hasChildren: 'hasChildren'}">
              <!-- <el-table-column type="selection"></el-table-column> -->
              <el-table-column prop="id" label="序号"> </el-table-column>
              <el-table-column prop="nickname" label="用户昵称" > </el-table-column>
              <el-table-column prop="user_code" label="用户ID" > </el-table-column>
              <el-table-column prop="badge_name" label="徽章名称" > </el-table-column>
              <el-table-column prop="picture" label="徽章图片" >
                  <template slot-scope="scope">
                    <el-popover placement="right" max-width="420" trigger="hover">
                        <img :src="scope.row.picture" alt="" style="max-width: 200px;max-height: 200px">
                        <img slot="reference" :src="scope.row.picture" alt="" style="width: 50px;">
                    </el-popover>
                  </template>
              </el-table-column>
              <el-table-column prop="badge_type_name" label="徽章类别" > </el-table-column>
              <el-table-column prop="add_time" label="获得时间" > </el-table-column>


              <!-- <el-table-column label="操作" width="180px">
                  <template slot-scope="scope">
                  <el-button type="primary" size="mini" icon="el-icon-edit" @click="handleUpdate(scope.row)" plain>编辑</el-button>
                  <el-button type="danger" size="mini" icon="el-icon-delete" @click="handleDelete(scope.row)" plain>删除</el-button>
                  </template>
              </el-table-column> -->
          </el-table>
          <!-- 分页 -->
          <cus-pagination
              :total="total"
              :page.sync="listQuery.page"
              :limit.sync="listQuery.perPage"
              @pagination="getList"
          />
      </div>
  </el-card>
  <!-- 删除弹框 -->
    <el-dialog
        title="确定删除吗?"
        :visible.sync="deleteDialogVisible"
        width="435px"
        >
        <span style=""><em style="font-style:normal;color:red">删除后不可恢复</em>，你还要继续吗？</span>
        <span slot="footer" class="dialog-footer">
            <el-button @click="deleteDialogVisible = false">取 消</el-button>
            <el-button type="primary" @click="confirmDelete">确 定</el-button>
        </span>
    </el-dialog>
    <!-- 新增编辑弹框 -->
    <el-dialog  v-dialogDrag :title="titleMap[dialogStatus]" :visible.sync="dialogFormVisible" @close="handleDialogClose('editRulesForm')">
        <el-form :model="editRulesForm" :rules="editRulesFormRules" ref="editRulesForm" label-width="120px" class="demo-ruleForm">
            <el-form-item label="受限类型" prop="type">
                <el-select filterable v-model="editRulesForm.type" clearable placeholder="请选择受限类型">
                    <el-option
                    v-for="item in limit_typeList"
                    :key="item.value"
                    :label="item.label"
                    :value="item.value">
                    </el-option>
                </el-select>
            </el-form-item>
            <el-form-item label="选择省份" prop="province">
                <el-select filterable v-model="editRulesForm.province_id" placeholder="请选择省份" @change="chooseProvince">
                    <el-option
                    v-for="item in provinceList"
                    :key="item.district_id"
                    :label="item.name"
                    :value="item.district_id">
                    </el-option>
                </el-select>
            </el-form-item>
            <el-form-item label="选择城市" prop="city">
                <el-select filterable v-model="editRulesForm.city_id" placeholder="请选择城市">
                    <el-option
                    v-for="item in cityList"
                    :key="item.city_id"
                    :label="item.name"
                    :value="item.city_id">
                    </el-option>
                </el-select>
            </el-form-item>
            <el-form-item label="黑名单类别" prop="cate_ids" >
                <el-checkbox-group v-model="editRulesForm.cate_ids">
                    <el-checkbox v-for="item in blackList" name="cate_ids" :key="item.value" :label="item.label"></el-checkbox>
                </el-checkbox-group>
            </el-form-item>
            <el-form-item>
                <el-button @click="dialogFormVisible = false">返回</el-button>
                <el-button type="primary" @click="submitForm('editRulesForm')">提交</el-button>
            </el-form-item>
            </el-form>
    </el-dialog>
   </div>
</template>

<script>
import {
    listData,
    listTypeData
} from '@/api/badge/badgeUserList'
export default {
    data(){
        return {
            // 徽章类别
            badgeType:[],
            // 要修改的当前行的id
            row_id:0,
            // 黑名单类别
            blackList:[
                {value:1,label:'1'},
                {value:2,label:'4'},
                {value:3,label:'6'},
                {value:4,label:'3'},
                {value:5,label:'5'}
            ],
            // 选中的黑名单类别
            checkBlackList:[],
            provinceList:[],
            cityList:[],
            // 表单规则
            editRulesFormRules:{
                type:[{ required: true, message: '请选择受限类型', trigger: 'change' }],
                province_id:[{ required: true, message: '请选择省份', trigger: 'change' }],
                city_id:[{ required: true, message: '请选择城市', trigger: 'change' }],
                cate_ids:[{ type: 'array', required: true, message: '请至少选择一个黑名单类别', trigger: 'change' }]
            },
            // 受限类型
            limit_typeList:[
                {value:0,label:'全部'},
                {value:1,label:'IP'},
                {value:2,label:'归属地'},
            ],
            editRulesForm:{
                type:undefined,
                province_id:undefined,
                city_id:undefined,
                cate_ids:[],
            },
            dialogStatus: '',
            // dialog的头部信息
            titleMap: {
                update: '编辑',
                create: '新增'
            },
            dialogFormVisible:false,
            deleteDialogVisible:false,
            listLoading:false,
            menuList:[],
            limitList:[],
            listQuery:{
                page:1,
                perpage:10,
                user_code:undefined,
                nickname:undefined,
                type_id:undefined,
                badge_name:undefined
            },
            total:0,
            // 勾选内容
            multipleSelection: [],
            // 要删除的内容的ids
            dataIds:'',
        }
    },
    created(){
        this.getTypeList()
        this.getList()
    },
    methods:{
        getList(){
            this.listLoading = true;
            let urlData = "?";
            if (this.listQuery.page) {
                urlData = urlData + `page=${this.listQuery.page}&`;
            }
            if (this.listQuery.perPage) {
                urlData = urlData + `perPage=${this.listQuery.perPage}`;
            }
            if (this.listQuery.user_code) {
                urlData = urlData + `&user_code=${this.listQuery.user_code}`;
            }
            if (this.listQuery.nickname) {
                urlData = urlData + `&nickname=${this.listQuery.nickname}`;
            }
            if (this.listQuery.type_id) {
                urlData = urlData + `&type_id=${this.listQuery.type_id}`;
            }
            if (this.listQuery.badge_name) {
                urlData = urlData + `&badge_name=${this.listQuery.badge_name}`;
            }
            // urlData);
            listData(urlData).then((response) => {

                this.menuList = response.data.list;
                this.total = response.data.meta.total;
                this.listLoading = false
            })
        },
        getTypeList(){
            let urlData = '?page=1&perPage=1000000000'
            listTypeData(urlData).then(response => {
                response.data.list.forEach(item => {
                    if(item.status === 1){
                        this.badgeType.push({value:item.id,label:item.name})
                    }
                })
            })
        },
         searchSubmit(){
            this.listQuery.page = 1;
            this.getList()
        },
        resetSubmit(){
            this.listQuery.page=  1;
            this.listQuery.perpage=10
            this.listQuery.type_id = undefined;
            this.listQuery.nickname = undefined;
            this.listQuery.user_code = undefined;
            this.listQuery.badge_name = undefined;
        },
        // 点击新增
        handleCreate(){
            this.resetForm('editRulesForm')
            this.dialogStatus = 'create'
            this.dialogFormVisible = true
        },
        // 点击编辑
        async handleUpdate(row){
            await this.getCity(row.province_id)
            this.row_id = row.id
            this.editRulesForm.type = row.type;
            this.editRulesForm.province_id = row.province_id;
            this.editRulesForm.city_id = row.city_id;
            this.editRulesForm.cate_ids = row.cate_ids.split(",");
            this.dialogStatus = 'update'
            this.dialogFormVisible = true
        },

        // 重置表单内容
        resetForm(formName) {
            this.$nextTick(()=>{
                // this.$refs[formName].resetFields();
                if (this.$refs[formName] !== undefined) {
                    this.$refs[formName].resetFields();
                }
                this.cityList = [];
                this.editRulesForm = {
                    type:undefined,
                    province_id:undefined,
                    city_id:undefined,
                    cate_ids:[],
                }
            })

        },
        // 获取省份
        getProvince(){
            getProvince().then(response => {
                this.provinceList = response.data
            })
        },
        chooseProvince(id){
            // id)
            this.editRulesForm.city = '';
            this.getCity(id)
        },
        // 获取城市
        getCity(id){
            let urlData = `?province_id=${id}`
            // getCity(urlData)
            getCity(urlData).then(response => {
                this.cityList = response.data
            })
            // this.cityList)
        },
        submitForm(formName) {
            this.$refs[formName].validate((valid) => {
                if (valid) {
                    if(this.dialogStatus === 'create'){
                        postAddData(this.editRulesForm).then(response => {
                            if (response.code === 200) {
                                this.getList()
                                this.dialogFormVisible = false;
                                this.$notify({
                                    type:'success',
                                    message: '操作成功',
                                    position: 'bottom-right',
                                    showClose: false,
                                    duration: 3000
                                });
                            } else {
                                this.$message({
                                    message: response.message,
                                    type: 'error'
                                });
                            }
                        })
                    }else {
                        putEditData(this.row_id,this.editRulesForm).then(response => {
                            if (response.code === 200) {
                                this.getList()
                                this.dialogFormVisible = false;
                                this.$notify({
                                    type:'success',
                                    message: '操作成功',
                                    position: 'bottom-right',
                                    showClose: false,
                                    duration: 3000
                                });
                            } else {
                                this.$message({
                                    message: response.message,
                                    type: 'error'
                                });
                            }
                        })
                    }
                } else {

                    return false;
                }
            });
        },
        // 勾选
        handleSelectionChange(val) {
        this.multipleSelection = val;
        },
        // 点击单个删除
        handleDelete(row) {
            this.dataIds = {ids:`${row.id}`}
            this.deleteDialogVisible = true
        },
        // 点击批量删除
        handleDeleteAll(){
            if(this.multipleSelection.length === 0){
                this.$message({
                    message: '请先勾选要删除的内容',
                    type: 'warning'
                });
                return;
            };
            this.deleteDialogVisible = true
        },
        // 确定删除
        confirmDelete(){
            if(this.multipleSelection.length !== 0){
                let ids = '';
                for(let key in this.multipleSelection){
                    ids+=`${this.multipleSelection[key].id},`
                }
                ids = ids.substring(0, ids.length - 1)
                this.dataIds = {ids:ids}
            }
            // this.dataIds)
            this.deleteDialogVisible = false;
            deleteData(this.dataIds).then((response) => {
                if (response.code === 200) {
                    this.getList()
                    this.deleteDialogVisible = false;
                    this.$notify({
                        type:'success',
                        message: '操作成功',
                        position: 'bottom-right',
                        showClose: false,
                        duration: 3000
                    });
                } else {
                    this.$message({
                        message: response.message,
                        type: 'error'
                    });
                }
            })
        },
        handleDialogClose(formName) {
            if (this.$refs[formName]) {
                this.$refs[formName].clearValidate(); // 清除整个表单的校验
            }
        },
    }
}
</script>

<style scoped>
[v-cloak] {
        display: none;
    }
    .clearfix:before,
    .clearfix:after {
        display: table;
        content: "";
    }
    .clearfix:after {
        clear: both
    }

    .box-card {
        width: 100%;
    }

    .demo-form-inline {
        float: right;
    }

    /deep/ .el-card__header {
        padding-bottom: 0;
    }
</style>
